import { Form, Input, Button } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import {useEffect, useState} from "react";
import {getData} from "../utils/handleLocal";

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
    },
};
const formItemLayoutWithOutLabel = {
    wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 20, offset: 4 },
    },
};

const DynamicFieldSet = () => {
    const [ workSiteList, setWorkSiteList ] = useState(getData('workSiteList'))
    useEffect(() => {
        console.log(workSiteList)
    },[])
    const onFinish = values => {
        console.log('Received values of form:', values);
    };

    return (

        <Form name="dynamic_form_item" {...formItemLayoutWithOutLabel} onFinish={onFinish} initialValues={workSiteList} add={workSiteList}>
            <Form.List
                name="workSiteLIst"
            >

                {(fields, { add, remove }, { errors }) => (

                    <>
                        {

                            fields.map((field, index) => (
                            <Form.Item
                                {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                                label={index === 0 ? 'Passengers' : ''}
                                required={false}
                                key={field.key}

                            >
                                <Form.Item
                                    {...field}
                                    validateTrigger={['onChange', 'onBlur']}
                                    noStyle
                                >
                                    <Input placeholder="passenger name" style={{ width: '60%' }} />
                                </Form.Item>
                                {fields.length > 1 ? (
                                    <MinusCircleOutlined
                                        className="dynamic-delete-button"
                                        onClick={() => remove(field.name)}
                                    />
                                ) : null}
                            </Form.Item>
                        ))}
                        <Form.Item>
                            <Button
                                type="dashed"
                                onClick={() => add()}
                                style={{ width: '60%' }}
                                icon={<PlusOutlined />}
                            >
                                Add field
                            </Button>
                            <Button
                                type="dashed"
                                onClick={() => {
                                    add('The head item', 0);
                                }}
                                style={{ width: '60%', marginTop: '20px' }}
                                icon={<PlusOutlined />}
                            >
                                Add field at head
                            </Button>
                            <Form.ErrorList errors={errors} />
                        </Form.Item>
                    </>
                )}
            </Form.List>
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    );
};

export default DynamicFieldSet
